/**
* @author: zhazhjie
* @email: zhazhjie@vip.qq.com
* @date: 2018-04-20 11:14:13
* @version: 1.0
*/

<template>
  <div class="spin-box" ref='spinBox' :class='zoomIn?"zoom-in":""'>
    <svg viewBox="25 25 50 50" class="spin" ref="spin">
      <circle ref="circle" cx="50" cy="50" r="20" fill="none" class="path" style='stroke-dasharray:1,200;'></circle>
    </svg>
  </div>
</template>

<script>
import FLoading1 from './loading/loading-1';
import FEmpty from './empty';
import {throttle} from 'js-utils';
import FLoading2 from './loading/loading-2';

export default {
  name: 'f-refresh',
  props: {
    loading: {
      type: Boolean,
      default: false
      // required: true
    },
    emitHeight: {
      type: Number,
      default: 150
    }
  },
  data() {
    return {
      startY: 0,
      startX: 0,
      toTopFlag: false,
      isRefresh: false,
      zoomIn: false,
      successFlag: false,
      topId: null,
      emitLoadHeight: 100,
      resetY: false,
      movable: true,
      firstChange: true
    };
  },
  components: {
    FLoading2,
    FLoading1,
    FEmpty
  },
  methods: {
    handleStart(e) {
      this.startY = e.touches[0].pageY;
      this.startX = e.touches[0].pageX;
      if (this.startY > this.emitHeight) return;
      addEventListener('touchmove', this.handleMove, {passive: false});
      addEventListener('touchend', this.handleEnd);
    },
    handleMove(e) {
      if (this.loading) return;
      let curY = e.changedTouches[0].pageY;
      let curX = e.changedTouches[0].pageX;
      let translateX = curX - this.startX;
      let translateY = curY - this.startY;
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      if (scrollTop > 0 || translateY < 0 || Math.abs(translateY) < Math.abs(translateX)) {
        this.removeEvent();
        return;
      }
      if (e.cancelable) {
        e.preventDefault();
      }
      if (curY > this.startY) {
        let spinBox = this.$refs.spinBox;
        let circle = this.$refs.circle;
        if (!this.resetY) {
          this.startY = curY;
          this.resetY = true;
        }
        this.zoomIn = false;
        let H = curY - this.startY;
        let top = H - H / 2;
        if (top < 200) {
          spinBox.style.top = top + 'px';
        }
        if (H > 50 && H < 140) {
          circle.style.strokeDasharray = H - 50 + ', 200';
        } else if (H >= 140) {
          circle.style.strokeDasharray = '90, 200';
          this.setRotateZ(this.$refs.spin, H - 140);
          // this.$refs.spin.style.transform = 'rotateZ(' + (H - 140) + 'deg)';
        }
      }
    },
    handleEnd(e) {
      this.movable = true;
      this.firstChange = true;
      this.resetY = false;
      let spinBox = this.$refs.spinBox;
      let top = this.getStyle(spinBox, 'top');
      switch (true) {
        case top <= 0:
          return;
        case top >= 60:
          if (this.loading)
            return;
          this.isRefresh = true;
          this.$emit('refresh', true);
          setTimeout(this.moveBack, 0, 60);
          break;
        default:
          this.moveBack();
          break;
      }
      this.removeEvent();
    },
    getStyle(el, item) {
      return +(el.style[item].replace(/[^0-9\-\.]/ig, ''));
    },
    resetStyle() {
      this.$refs.spinBox.style = '';
      this.$refs.spin.style = '';
      this.$refs.circle.style = 'stroke-dasharray:1,200';
    },
    setRotateZ(el, deg) {
      el.style.transform = 'rotateZ(' + deg + 'deg)';
    },
    handleWait() {
      let spin = this.$refs.spin;
      // let circle=this.$refs.circle;
      let deg = this.getStyle(spin, 'transform');
      this.setRotateZ(spin, deg - 5);
      // spin.style.transform = 'rotateZ(' + (rotate - 5) + 'deg)';
      // circle.style.transform='rotateZ('+ (rotate - 10) + 'deg)';
      if (!this.loading) {
        this.zoomIn = true;
        this.moveBack();
        return;
      }
      requestAnimationFrame(() => this.handleWait());
    },
    moveBack(h) {
      let spinBox = this.$refs.spinBox;
      let spin = this.$refs.spin;
      let circle = this.$refs.circle;
      let top = this.getStyle(spinBox, 'top');
      if (top - 10 <= (h || 0)) {
        spinBox.style.top = (h || 0) + 'px';
        if (h) {
          return this.handleWait();
        } else {
          // spin.style.transform = 'rotateZ(0deg)';
          this.setRotateZ(spin, 0);
          circle.style.strokeDasharray = '1,200';
          return;
        }
      }
      spinBox.style.top = top - 10 + 'px';
      let deg = this.getStyle(spin, 'transform');
      this.setRotateZ(spin, deg - 20);
      // spin.style.transform = 'rotateZ(' + (rotate - 20) + 'deg)';
      requestAnimationFrame(() => this.moveBack(h));
    },
    removeEvent() {
      removeEventListener('touchmove', this.handleMove);
      removeEventListener('touchend', this.handleEnd);
    }
  },
  computed: {},
  watch: {},
  created() {
    addEventListener('touchstart', this.handleStart);
  },
  beforeDestroy() {
    removeEventListener('touchstart', this.handleStart);
    this.removeEvent();
  }
};
</script>

<style lang="scss" scoped>
@import "../style/list";
</style>
